<template>
	<view class="liangbiaopnggu">
		<headertop title="中医辨证" str="orderlist" str1="oridei" back1="#fff"></headertop>
		<view class=""
			:style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px','box-shadow': '0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.05)'}">
		</view>
		<view class="jindubox">
			<view class="jindunum">
				进度：
			</view>
			<view class="jinduline">
				<view class="center" :style="{'width':num+'%'}">

				</view>
			</view>
			<view class="jindunum">
				{{num}}%
			</view>
		</view>
		<scroll-view class="bottomcontent" enhanced scroll-with-animation :scroll-top="scrolljuli"
			:style="{'height':pageheight+'px'}" :throttle="false" :scroll-y="true" @scroll="handleScroll">
			<view class="center ">
				<view v-for="(item,index) in liaotianarr" :key="index" :id="`target-element${index}`"
					style="transition: 1s;">
					<view class="userlt" v-if="item.shenfen=='user'">
						<image :src="_static('/images/LOGO2@2x.png')" class="avatar" mode="widthFix">
						</image>
						<view class="bubble-container">
							<view v-if="item['text']">{{item['text']}}</view>
							<up-loading-icon text="生成中" textSize="14" v-if="!item['text']"></up-loading-icon>
							<view class="triangle1"></view>
						</view>
					</view>
					<view class="userltright" v-if="item.shenfen!='user'">
						<view class="bubble-container" @click="cc(item,index)">
							<view class="ansderhua" v-if="item.isAnimating">

							</view>
							<view class="ansderhua1" v-else>{{item['text']}}</view>
							<view class="triangle1"></view>
						</view>
						<image :src="userobj.avatar" class="avatar" mode="">
						</image>
					</view>
					<view :class="bool1?'xiamto animate__fadeInUp':'xiamto'" v-if="!item['bool']">
						<view class="cnter" v-if="index+1==liaotianarr.length&&item['text']&&bool1" id="xuanxiang">
							<view :class="item1['option']==item['text']?'lineti xzcolor':'lineti'"
								v-for="item1 in list[pingguind]['optionjson']" @click="xzfun(item1,index,item)"
								:key="item1.id">
								{{item1.option}}
							</view>
						</view>
					</view>
					<view class="xiamto" v-if="item['bool']">
						<view class="cnter" v-if="item['bool']" id="xuanxiang">
							<view :class="item1['option']==item['text']?'lineti xzcolor':'lineti'"
								v-for="item1 in list[pingguind]['optionjson']"
								@click="xzfun(item1,((index+1)/2-1),item,index)" :key="item1.id">
								{{item1.option}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 	<view class="" :style="{'height':`${tianchongqu}px`}">

			</view> -->
			<view class="" style="height:20vh">

			</view>
		</scroll-view>
		<!-- 	<view class="fixed">
			<view class="btn" :style="{'justify-content':pingguind==0?'center':'space-between'}">
				<view class="btnn" @click="syb" v-if="pingguind!=0">
					上一题
				</view>
				<view class="btnn" @click="next" v-if="pingguind!=list.length-1">
					下一题
				</view>
				<view class="btnn1" @click="tijiao()" v-else>
					提交
				</view>
			</view>
		</view> -->
		<up-popup :show="show" mode="center">
			<view class="centerbianz">
				<view class="centertext">
					<view class="title">
						中医辨证结果
					</view>
					<view class="texts">
						<view class="" style="display: block;text-indent: 56rpx;">
							结果：{{result}}
						</view>
						</br>
						<view class="" style="display: block;text-indent: 56rpx;">
							结果解释：{{explanation}}
						</view>
					</view>
					<view class="quedbnt" @click="back">
						确定
					</view>
				</view>

			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	const statusBarHeight = ref('')
	import {
		$api
	} from '../../ulm';
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const barHeight = ref('')
	const list = ref([])
	const pageheight = ref(0)
	const scrolljuli = ref('')
	const lastScrollTop = ref(0) // 上次滚动位置
	const scrollDirection = ref('') // 滚动方向
	const scrollTop = ref(0) // 当前滚动位置
	const result = ref('')
	const explanation = ref('')
	const userobj = ref({})
	const pingguind = ref(0)
	const tianchongqu = ref('')
	const scrollheight = ref(279)
	const liaotianarr = ref([])
	const show = ref(false)
	const flag = ref(false)
	const isAnimating = ref(false)
	const bool1 = ref(true)
	onLoad(() => {
		init()
		getuser()
	})
	const num = computed(() => {
		var arr = list.value.filter(item => item.answer != undefined)
		console.log(arr.length, 'arr---------------');
		if (((arr.length / list.value.length) * 100) == 100) {
			return 100
		} else {
			return parseInt((arr.length / list.value.length) * 100)
		}
	})
	async function init() {
		const res = await $api.questionListzy()
		if (res.code == 1) {
			list.value = res.data
			liaotianarr.value.push({
				text: list.value[pingguind.value]['title'],
				shenfen: 'user',
				bool: false
			})
			for (var i in list.value) {
				list.value[i]['answer'] = undefined
			}
		}
	}
	async function getuser() {
		const res = await $api.userinfo1()
		if (res.code == 1) {
			userobj.value = res.data['userinfo']
		}
	}

	function xzfun(item, index, item1, index2) {
		if (item1.bool) {
			if (list.value[index]['answer'] != item.option) {
				item1.bool = false
			}
			list.value[index]['answer'] = item.option
			liaotianarr.value[index2]['text'] = item.option
			return
		}
		if (!bool1.value) return
		bool1.value = false
		flag.value = true
		list.value[pingguind.value]['answer'] = item.option
		liaotianarr.value.push({
			isAnimating: true,
			text: item.option,
			shenfen: 'user1',
			bool: false
		})
		setTimeout(() => {
			liaotianarr.value[liaotianarr.value.length - 2]['isAnimating'] = false
			console.log(liaotianarr.value[liaotianarr.value.length - 1], '174174174');
		}, 500)
		if (pingguind.value == list.value.length - 1) {
			tijiao()
			return
		}
		liaotianarr.value.push({
			text: '',
			shenfen: 'user',
			bool: false
		})
		setTimeout(() => {
			pingguind.value++
			liaotianarr.value[liaotianarr.value.length - 1]['text'] = list.value[pingguind.value]['title']
			// 填充区域赋值
			const query = uni.createSelectorQuery();
			query.select(`#target-element${liaotianarr.value.length - 1}`).boundingClientRect(rect => {
				console.log(rect, 'rectrectrect');
				if (rect) tianchongqu.value = pageheight.value - rect.height - 279 - 60
			}).exec(); // 必须调用 exec() 执行查询/*  */
			setTimeout(() => {
				bool1.value = true
			}, 500)
		}, 1000)


		setTimeout(() => {
			console.log(tianchongqu.value,
				'tianchongqu.valuetianchongqu.valuetianchongqu.valuetianchongqu.value');
			scrolljuli.value = 99999
		}, 1600)

	}

	function next() {
		if (!list.value[pingguind.value]['answer']) {
			uni.showToast({
				title: '请选择答案进行下一题',
				icon: 'none'
			})
			return
		}
		if (list.value.length - 1 != pingguind.value) {
			pingguind.value++

		}

	}

	function back() {
		uni.navigateBack()
	}

	function cc(item, ind) {
		item.bool = !item.bool
	}

	function handleScroll(e) {
		console.log(e.detail.scrollTop, e, 'e.detail.scrollTope.detail.scrollTope.detail.scrollTop');
		if (scrolljuli.value == 99999) {
			scrolljuli.value = e.detail.scrollHeight
		}
	}

	async function tijiao() {
		if (!list.value[pingguind.value]['answer']) {
			uni.showToast({
				title: '请选择答案进行提交',
				icon: 'none'
			})
			return
		}
		var array = []
		for (var i in list.value) {
			var ind = list.value[i]['optionjson'].findIndex(item => item.option == list.value[i]['answer'])
			var obj = {
				id: list.value[i]['id'],
				title: list.value[i]['title'],
				question_type: list.value[i]['question_type'],
				optionjson: [list.value[i]['optionjson'][ind]]
			}
			array.push(obj)
		}
		const res = await $api.submitconstitution(array)
		if (res.code == 1) {
			result.value = res.data.result
			explanation.value = res.data.explanation
			show.value = true
		}
	}



	function syb() {

		pingguind.value--
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight


		const {
			top,
			height

		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;

		pageheight.value = uni.getSystemInfoSync().windowHeight - barHeight.value - statusBarHeight.value
		const query = uni.createSelectorQuery();
		setTimeout(function() {
			query.select(`#target-element0`).boundingClientRect(rect => {
				console.log(rect, 'rectrectrect');
				if (rect) tianchongqu.value = pageheight.value - rect.height
			}).exec(); // 必须调用 exec() 执行查询

		}, 500);

	})
</script>

<style lang="scss">
	.jindubox {
		position: fixed;
		width: 100%;
		display: flex;
		justify-content: center;
		z-index: 999;
		align-items: center;
		background: #f7f8fa;
		height: 60rpx;

		.jindunum {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #1D2129;
			margin-left: 18rpx;
		}

		.jinduline {
			width: 534rpx;
			height: 22rpx;
			background: #FFFFFF;
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);

			.center {
				width: 24%;
				height: 22rpx;
				border-radius: 13rpx 13rpx 13rpx 13rpx;
				background: #2AB4F5;

			}
		}
	}


	.animate__fadeInUp {
		-webkit-animation: fadeInUp 2s;
		animation: fadeInUp 2s;
	}

	@keyframes fadeInUp {
		0% {
			opacity: 0;
			-webkit-transform: translate3d(0, 200px, 0);
			transform: translate3d(0, 200px, 0)
		}

		to {
			opacity: 1;
			-webkit-transform: translateZ(0);
			transform: translateZ(0)
		}
	}

	::v-deep .u-popup__content {
		background-color: rgba(255, 0, 0, 0) !important;
	}

	.xzcolor {
		background: #2ab4f5 !important;
		color: #fff !important;
	}

	.centerbianz {
		width: 686rpx;
		height: 652rpx;
		background: linear-gradient(180deg, #CAEEFF 0%, #FFFFFF 23%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;

		.centertext {
			width: 630rpx;
			margin: auto;
			overflow: hidden;

			.title {
				width: 100%;
				text-align: center;
				margin-top: 48rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #1D2129;
			}

			.texts {
				width: 100%;
				height: 400rpx;
				overflow-y: scroll;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
			}

			.quedbnt {
				width: 246rpx;
				height: 64rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				line-height: 64rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				margin: auto;
			}
		}

	}

	.fixed {
		width: 100%;
		height: 186rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0%;

		.btn {
			width: 686rpx;
			height: 82rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;

			.btnn {
				width: 326rpx;
				height: 82rpx;
				background: #F2F3F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #4E5969;
			}

			.btnn1 {
				width: 326rpx;
				height: 82rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}

	page {
		background: #F7F8FA;
	}

	.liangbiaopnggu {
		width: 100%;
		overflow: hidden;

		.bottomcontent {
			width: 100%;

			.center {
				width: 686rpx;
				margin: auto;
				margin-top: 60rpx;

				.xiamto {
					width: 686rpx;
					overflow: hidden;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 80rpx;
					margin-bottom: 30rpx;

					.cnter {
						width: 630rpx;
						margin: auto;
						margin-top: 28rpx;

						.lineti {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							background: #F7F8FA;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							width: 100%;
							text-align: center;
							padding: 24rpx 0;
							margin-bottom: 20rpx;
						}
					}
				}

				.userltright {
					width: 100%;
					display: flex;
					margin-bottom: 50rpx;
					justify-content: flex-end;

					.avatar {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
						margin-left: 32rpx;
					}

					.scale-animation {
						width: 530rpx;
						height: 300rpx;
					}



					.bubble-container {
						transition: 1s;
						position: relative;
						max-width: 530rpx;
						/* 气泡框最大宽度 */
						background: #2AB4F5;
						/* 气泡框背景颜色 */
						color: #FFFFFF;
						/* 文字颜色 */
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						/* 圆角边框 */
						padding: 22rpx;
						font-size: 28rpx;

						/* 内边距 */
						/* 外边距，可根据需要调整 */
						.ansderhua {
							width: 530rpx;
							height: 300rpx;
							animation: pulse 0.5s;
						}

						.ansderhua1 {
							max-width: 530rpx;
						}

						@keyframes pulse {
							0% {
								opacity: 0;
								width: 530rpx;
								height: 300rpx;
							}


							100% {
								opacity: 1;
								height: 96rpx;
								width: 150rpx;
							}
						}

						.triangle1 {
							position: absolute;
							width: 0;
							height: 0;
							border-top: 10px solid transparent;
							/* 左边透明 */
							border-bottom: 10px solid transparent;
							/* 右边透明 */
							border-left: 10px solid #2AB4F5;
							/* 底边为气泡框背景色 */
							right: -10px;
							/* 位于气泡框顶部 */
							top: 50%;
							/* 居中 */
							/* 居中 */
							transform: translateY(-50%);
							/* 水平居中 */
						}

					}
				}

				.userlt {
					width: 100%;
					display: flex;
					margin-bottom: 50rpx;

					.avatar {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
						margin-right: 32rpx;
					}


					.bubble-container {
						position: relative;
						max-width: 530rpx;
						/* 气泡框最大宽度 */
						background: #FFFFFF;
						/* 气泡框背景颜色 */
						color: #4E5969;
						/* 文字颜色 */
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						/* 圆角边框 */
						padding: 22rpx;
						font-size: 28rpx;
						/* 内边距 */
						/* 外边距，可根据需要调整 */

						.triangle1 {
							position: absolute;
							width: 0;
							height: 0;
							border-top: 10px solid transparent;
							/* 左边透明 */
							border-bottom: 10px solid transparent;
							/* 右边透明 */
							border-right: 10px solid #FFFFFF;
							/* 底边为气泡框背景色 */
							left: -10px;
							/* 位于气泡框顶部 */
							top: 50%;
							/* 居中 */
							transform: translateY(-50%);
							/* 水平居中 */
						}

					}


				}
			}
		}
	}
</style>